<template>
  <div class="app-cont">
    <!--这是 Header 区域 -->
    <!--<div class="header">-->
      <!--<headers title="编辑银行卡"></headers>-->
    <!--</div>-->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <div class="idcar">
            <mt-field type="number" label="卡号" placeholder="请输入银行卡" v-model="number">
              <div class="mint-field-other">&gt;</div>
            </mt-field>
            <mt-field label="卡类型" placeholder="请选择发卡银行" v-model="type">
              <div class="mint-field-other">&gt;</div>
            </mt-field>
            <mt-field label="姓名" placeholder="请输入姓名" type="text" v-model="name">
              <div class="mint-field-other">&gt;</div>
            </mt-field>
          </div>
          <div class="btn">
            <a href="javascript:;" class="btn-next" @click="NewCard">保存</a>
          </div>
      </div>
    </div>
    <!-- 底部的 Tabbar 区域 -->

    </div>
  </div>
</template>

<script>
  /* eslint-disable semi */
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  export default {
    name: '',
    data () {
      return {
        index: 0,
        number: '',
        type: '',
        name: '',
        pretermission: false,
        select: 'selected',
        clickIndex: 0
      }
    },
    created () {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
      this.name = this.$route.params.name;
      this.number = this.$route.params.number;
      this.type = this.$route.params.type;
      this.index = this.$route.params.index;
    },
    methods: {
      NewCard () {
//        alert('保存成功！' + this.index)
        this.$router.push({name: 'creditCard',
          params: {name: this.name, number: this.number, type: this.type, index: this.index}})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*padding: 80px 0 0;*/
    box-sizing: border-box;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 92px;
      width: 100%;
    }
  }

  .tabbar {
    position: fixed;
    box-sizing: border-box;
    height: 94px;
    border-top: 1px solid #f3f3f3;
    color: #898d93;
  }

  .fenlei {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    ::-webkit-scrollbar {
      display: none;
    }
    .select {
      height: 90px;
      margin-top: 20px;
      line-height: 90px;
      background: #ffffff;
      span{
        font-size: 24px;
        margin-left: 27px;
      }
      i{
        width: 32px;
        height: 32px;
        background: url('../assets/images/ico_2@1x.png') no-repeat;
        background-size: 100%;
        float: right;
        margin: 30px;
      }
      .selected{
        background: url('../assets/images/ico_1@1x.png') no-repeat;
        background-size: 100% 100%;
      }
      .red{color: #ff0000}
    }
    .btn{
      width:100%;
      height: 120px;
      text-align: center;
      line-height: 120px;
      background: #f4f4f4;
      position: fixed;
      bottom: 0;
      .btn-next{
        display: inline-block;
        width: 580px;
        height: 74px;
        margin:0;
        border-radius: 35px;
        border: 1px solid #fe3519;
        color: #fe3519;
        text-align: center;
        line-height: 74px;
        font-size: 26px;
      }
    }
  }

</style>
<style lang="scss">
  a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    outline: none;
  }
  .idcar{
    height: 870px;
    .mint-checklist{
      margin-top: 20px;
    }
    .mint-cell {
      border-bottom: 2px solid #f4f4f4;
      .mint-cell-wrapper {
        background: #ffffff;
        height: 92px;
        line-height: 92px;
        font-size: 26px;
        padding: 0px 30px 0px 34px;
        color: #3b3b43;
        .mint-cell-title {
          .mint-cell-text {
            font-size: 26px;
            color: #3b3b43;
          }

        }
        .mint-cell-value {
          ::-webkit-input-placeholder {
            text-align: right;
          }
          .mint-field-core {
            color: #a1a1a1;
            text-align: right;
          }

        }
      }
    }
    .mint-field-other{
      width: 10px;
      height: 92px;
      text-align: center;
      color: #3b3b43;
      padding-left: 4px;
    }
  }
  .mint-checklist-title{
    margin: 0;
  }

  .mint-cell-title{
    font-size: 26px;
    color: #3b3b43;
  }
  .mint-checklist-label{
    padding: 0;
  }
  .mint-checkbox-label{
    margin-left: 0;
  }
  .btn-next{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
    display: block;
    margin: 55px auto 0;
    width: 580px;
    height: 74px;
    border-radius: 35px;
    border: 1px solid #fe3519;
    color: #fe3519;
    text-align: center;
    line-height: 74px;
    font-size: 26px;
  }


</style>
